<template>
  <el-dialog
    ref="drawerRef"
    v-model="dialog"
    title="详情"
    :before-close="handleClose"
    class="demo-drawer"
    width="80%"
    v-loading="loading"
  >
    <div class="demo-drawer__content">
      <el-form :model="formData" :inline="true">
        <el-form-item label="类型" :label-width="formLabelWidth">
          {{ formData.bill_type_text }}
        </el-form-item>
        <el-form-item label="企业:" :label-width="formLabelWidth">
          {{ formData.enter_company_name }}
        </el-form-item>
        <el-form-item label="业务员" :label-width="formLabelWidth">
          {{ formData.enter_nickname }}
        </el-form-item>
      </el-form>
      <el-divider />
      <el-descriptions title="票据信息" size="small" :column="3" border>
        <template #extra>
          <el-text class="mx-1" type="danger">如若是老票,或是不可拆份票据,子票区间都为0</el-text>
        </template>
        <el-descriptions-item label="日期">{{ formData.recognizerDate }}</el-descriptions-item>
        <el-descriptions-item label="票号">{{ formData.billNo }}</el-descriptions-item>
        <el-descriptions-item label="承兑人">{{ formData.acceptorName }}</el-descriptions-item>
        <el-descriptions-item label="到期日">{{ formData.expirationDate }}</el-descriptions-item>
        <el-descriptions-item label="背书人">{{ formData.bill_back_user }}</el-descriptions-item>
        <el-descriptions-item label="是否为瑕疵票">{{ formData.is_flaw == 1 ? "否" : "是" }}</el-descriptions-item>
        <el-descriptions-item label="票面金额(万元)">{{ formData.billAmount }}</el-descriptions-item>
        <el-descriptions-item label="子票开始区间">{{ formData.billRangeLower }}</el-descriptions-item>
        <el-descriptions-item label="子票开始区间">{{ formData.billRangeUpper }}</el-descriptions-item>
        <el-descriptions-item label="每十万价格">{{ formData.enter_price }}</el-descriptions-item>
        <el-descriptions-item label="贴息费">{{ formData.enter_discount }}</el-descriptions-item>
        <el-descriptions-item label="到账金额">{{ formData.enter_finally }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ formData.remark }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import { ElDrawer } from "element-plus"
import { getDetailsApi } from "@/api/bill"

const formLabelWidth = "80px"

const dialog = ref(false)
const loading = ref(false)

const formData = reactive({
  bill_type: 1,
  bill_id: 0,
  recognizerDate: "",
  billNo: "",
  acceptorName: "",
  billAmount: 0,
  price: 0,
  money: 0,
  moneys: 0,
  expirationDate: "",
  billRangeUpper: "",
  billRangeLower: "",
  bill_type_text: "",
  enter_company_name: "",
  enter_nickname: "",
  enter_finally: "",
  enter_discount: "",
  enter_price: "",
  is_flaw: 1,
  bill_back_user: "",
  remark: ""
})
const bill_id = ref(0)
const drawerRef = ref<InstanceType<typeof ElDrawer>>()
const dialogShow = async (row: any) => {
  dialog.value = true
  formData.bill_id = row.bill_id
  bill_id.value = row.bill_id
  getDetails()
}
const handleClose = () => {
  cancelForm()
  emit("DetailsClose", true)
}
const emit = defineEmits(["DetailsClose"])
const cancelForm = () => {
  loading.value = false
  dialog.value = false
}

//#region 获取详情
const getDetails = () => {
  getDetailsApi({ bill_id: bill_id.value }).then((res: any) => {
    Object.assign(formData, res.data)
    console.log(res)
  })
}
//#endregion

defineExpose({ dialogShow })
</script>

<style scoped lang="scss">
.heads {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}

.heads div {
  margin-left: 10px;
}

.demo-drawer__footer {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}

.logBox {
  margin-top: 20px;
}
</style>
